Record nav arrows
canonPrevious / next record with the position n/m in the record header.
Owner approved 11 Oct 2026 (R47, R48; acrm !4962, prototype proto/record-nav-arrows@5f98c373d): one order ↑ ↓ then „Plocha · n/m" incl. the mail reader; J/K keys; no arrows on the phone. Dev check 11 Oct: mail reader 1440 light/dark — order prev · next · „Doručené · 1/50", titles „Předchozí (K)" / „Další (J)"; 390 no arrows. Preview drawer unified in acrm !4963 (RecordDrawer: ↑ ↓ + quiet „2/50", J/K) — checked on dev 11 Oct, Lidé 1440/390 light/dark. Full person detail via ↗ not checked on dev by script (MR screenshots). Registry repaired 17 Oct 2026 (review F1): RecordDrawer moved to components/drawer/. Registry repaired 17 Oct 2026 (review F3): mapped existing Ladle stories. Canon 17 Oct 2026 (AD): own stories Default · States · Composition + 6 light/dark baselines in acrm !5080 (f9b052d7e); usage + a11y in docs/section-top-bar. Story markup mirrors the app component 1:1 (RecordNavArrows reads router state, packages/ui must not import it).
Used in 6 files · 6 areas · 6× — pages/CompanyRecordPage, pages/MeetingDetailPage, pages/ObchodDetailPage, pages/OrderDetailPage, pages/PersonRecordPage, pages/ProjectDetailPage
Default
export const Default = () => (
<Bar>
<Arrows />
<PosLink surface="Lidé" n={2} m={50} />
</Bar>
);States
export const States = () => (
<div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
<Labeled label="first record — ↑ disabled">
<Bar>
<Arrows first />
<PosLink surface="Lidé" n={1} m={50} />
</Bar>
</Labeled>
<Labeled label="last record — ↓ disabled">
<Bar>
<Arrows last />
<PosLink surface="Lidé" n={50} m={50} />
</Bar>
</Labeled>
<Labeled label="list of one record — only the link back, no arrows">
<Bar>
<PosLink surface="Hovory" />
</Bar>
</Labeled>
<Labeled label="paging without a way back (older history entry) — quiet „n/m“">
<Bar>
<Arrows />
<PosQuiet n={2} m={3} />
</Bar>
</Labeled>
</div>
);Composition
export const Composition = () => (
<div style={{ display: 'grid', gap: 'var(--sp-6)' }}>
<Labeled label="record header — identity · spacer · ↑ ↓ „Lidé · 2/50“ · ⋮ · ✕">
<Bar width={720}>
<Arrows />
<PosLink surface="Lidé" n={2} m={50} />
<IconButton icon="dots-vertical" aria-label="Další akce" />
<IconButton icon="x" aria-label="Zavřít" />
</Bar>
</Labeled>
<Labeled label="mail reader — the same order; „Doručené · n/m“ is a button that returns to the list (Esc)">
<div style={{ width: 720 }}>
<SectionTopBar
title={<span className="tbar-h">Your secure link to Claude.ai is here</span>}
>
<SectionTopBarSpacer />
<Arrows />
<button
type="button"
className="tbar-pos is-link"
aria-label="Zpět na Doručené, záznam 2 z 50"
>
<span aria-hidden="true">Doručené · 2/50</span>
</button>
</SectionTopBar>
</div>
</Labeled>
<div style={row}>
<Labeled label="preview drawer — ↑ ↓ quiet „2/50“ (no surface name: the drawer stands over its list)">
<DrawerTop />
</Labeled>
<Labeled label="phone 390 px (R48) — no arrows, the link stays (✕ is not there)">
<Bar width={390}>
<PosLink surface="Lidé" n={2} m={50} />
<IconButton icon="dots-vertical" aria-label="Další akce" />
</Bar>
</Labeled>
</div>
</div>
);